<template>
  <el-dialog v-dialogDrag :title="dialogTitle" class="dialogStyleSmall" :visible.sync="dialogVisible">
    <el-form ref="form" :model="formData" label-width="auto">
      <el-col :span="24">
        <el-form-item label="父级字段" prop="parentId">
          <treeselect
            v-model="formData.parentId"
            disabled
            style="line-height: 36px"
            :options="fieldOptions"
            :show-count="false"
            placeholder=""
            clearable
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="字段名称" prop="fieldName">
          <el-input v-model="formData.fieldName" readonly placeholder="" size="medium" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="字段英文" prop="fieldVal">
          <el-input v-model="formData.fieldVal" readonly placeholder="" size="medium" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="外部字段" prop="isExrernal">
          <el-select v-model="formData.isExrernal" disabled clearable style="width: 100%" placeholder="" size="medium">
            <el-option
              v-for="item in externalOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="" prop="orderNum">
          <label slot="label" v-html="`排&emsp;&emsp;序`" />
          <el-input-number
            v-model="formData.orderNum"
            disabled
            size="medium"
            style="width: 100%"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="是否必填" prop="isRequired">
          <el-radio-group v-model="formData.isRequired" disabled>
            <el-radio label="0">是</el-radio>
            <el-radio label="1">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-form>
  </el-dialog>
</template>

<script>
import treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'DetailDialog',
  components: { treeselect },
  data() {
    return {
      // 外部字段
      externalOptions: [
        {
          label: '外部上',
          value: '0'
        },
        {
          label: '外部下',
          value: '2'
        },
        {
          label: '否',
          value: '1'
        }
      ],
      // 字段数组
      fieldOptions: [
        {
          label: '描述深度(m)',
          id: '1'
        },
        {
          label: '地层描述',
          id: '2'
        },
        {
          label: '密度',
          id: '3'
        }
      ],
      dialogVisible: false,
      dialogTitle: '',
      formData: {
        id: '',
        parentId: undefined,
        fieldName: '', // 字段名称
        fieldVal: '', // 字段英文
        isExrernal: '', // 外部字段
        isRequired: '', // 是否必填
        orderNum: 1 // 排序
      }
    }
  },
  methods: {
    // 初始化太难看
    handleAdd(title, id) {
      this.dialogVisible = true
      this.dialogTitle = title
      this.getDetailById(id)
    },
    // 获取详情
    getDetailById(id) {
      // detailSupperType(id).then(res => {
      this.formData = { ...id }
      // })
    },
    // 关闭
    cancel() {
      this.dialogVisible = false
    },
    // 确定
    submitForm() {
      this.dialogVisible = false
    }
  }
}
</script>

